<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <el-form :model="addQusetionnaireForm"  ref="addQusetionnaireRef" :rules="addQusetionnairerules">
      <el-form-item label="问卷地址：" :label-width="formLabelWidth"  v-if="addQusetionnaireForm.id">
        {{addQusetionnaireForm.voteUrl}}
      </el-form-item>
      <el-form-item label="问卷标题：" :label-width="formLabelWidth" prop="title">
        <el-input v-model="addQusetionnaireForm.title" autocomplete="off" placeholder="请填写标题"></el-input>
      </el-form-item>
      <el-form-item label="问卷描述：" :label-width="formLabelWidth">
        <el-input v-model="addQusetionnaireForm.content" autocomplete="off" ref="name" type="textarea" rows="5"
          placeholder="请填写描述"></el-input>
      </el-form-item>


      <el-form-item label="编号显示：" :label-width="formLabelWidth">
        <el-switch v-model="addQusetionnaireForm.showIndex" class="mb-2" @change="changeShowIndex"
          active-color="#409EFF" inactive-color="#c3c4c3" active-text="是" inactive-text="否">
        </el-switch>
      </el-form-item>
      <el-form-item label="标签位置：" :label-width="formLabelWidth">
        <el-switch v-model="addQusetionnaireForm.labelPositionIndex" active-color="#409EFF" inactive-color="#c3c4c3"
          active-text="上方" inactive-text="左侧" @change="changePositon">
        </el-switch>
      </el-form-item>

      <el-form-item label="微信授权：" :label-width="formLabelWidth">
        <el-switch v-model="addQusetionnaireForm.isAuthWxIndex" class="dateTimeRange" @change="changeIsAuthWxIndexIndex"
          active-color="#409EFF" inactive-color="#c3c4c3" active-text="是" inactive-text="否">
        </el-switch>
      </el-form-item>

      <el-form-item label="时间控制：" :label-width="formLabelWidth">
        <el-switch v-model="addQusetionnaireForm.showTimeIndex" class="dateTimeRange" @change="changeShowTimeIndex"
          active-color="#409EFF" inactive-color="#c3c4c3" active-text="开" inactive-text="关">
        </el-switch>

      </el-form-item>
      <el-form-item label="" :label-width="formLabelWidth"  v-if="addQusetionnaireForm.showTimeIndex == true">      
        <el-date-picker v-model="daterange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="到" unlink-panels="true"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

      </el-form-item>

      <el-form-item label="答题密码：" :label-width="formLabelWidth">
        <el-switch v-model="addQusetionnaireForm.showPasswordIndex" class="dateTimeRange"
          @change="changeShowPasswordIndex" active-color="#409EFF" inactive-color="#c3c4c3" active-text="开"
          inactive-text="关">
        </el-switch>
      </el-form-item>

      <el-form-item label="" :label-width="formLabelWidth" v-if="addQusetionnaireForm.showPasswordIndex == true">
        <el-input type="password" 
          v-model="addQusetionnaireForm.password" placeholder="空表示不需要密码,需要密码则需填写此栏" />
      </el-form-item>
      <el-form-item label="答题后感谢语：" :label-width="formLabelWidth">
        <el-input type="text" v-model="addQusetionnaireForm.finishMessage" placeholder="请输入答题后感谢语" />
      </el-form-item>


    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>

      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";

export default {
  name: "AddQusetionnaire",
  components: { ElForm, ElMessage },
  data() {
    return {
      dialogFormVisible: ref(false),
      formLabelWidth: "140px",
      title: "",
      personnelType: "",
      daterange: [],

      addQusetionnaireForm: {
        showIndex: false,
        showTimeIndex: false,
        showPasswordIndex: false,
        showFinishMessageIndex: true,
        labelPositionIndex:true,
        finishMessage:'',
        labelPosition:'top',
        isEmpty: true,
        indexGlobal: -1,
        questionnaireId: 0,
        isAuthWx:0,
        isAuthWxIndex:false,
        isPassword:0,
        isTimeControl:0,
        daterange: ",",
        formLabelWidth: 140,
        title: "",
        content: "",
        status: "",
        type: "",
        createName: "",
        createTime: "",
        startTime: "",
        endTime: "",
        count: "",
        isTemplate: 0,
        effect: "",
        version: "",
        createId: "",
        updateTime: "",

      },
      // 校验规则
      addQusetionnairerules: {
        title: vxRule(true, null, "blur"),
        content: vxRule(true, null, "blur"),
        createName: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },

    changePositon(val) {
      if (val) {
        this.addQusetionnaireForm.labelPosition = "top";
      } else {
        this.addQusetionnaireForm.labelPosition = "left";
      }
    },
    changeShowTimeIndex(val) {
      if (val) {
        this.addQusetionnaireForm.isTimeControl = 1;
      } else {
        this.addQusetionnaireForm.isTimeControl = 0;
      }
    },
    changeShowPasswordIndex(val) {
      if (val) {
        this.addQusetionnaireForm.isPassword = 1;
      } else {
        this.addQusetionnaireForm.isPassword = 0;
      }
    },

    getQusetionnaireById(id) {
      httpService("/javaApi/qtQuestionnaire/queryById", { id: id }, "get").then(
        (data) => {
          this.addQusetionnaireForm = data;
          if (data.showIndex == 1) {
            this.addQusetionnaireForm.showIndex = true;
          } else {
            this.addQusetionnaireForm.showIndex = false;
          }
          if (data.isAuthWx == 1) {
            this.addQusetionnaireForm.isAuthWxIndex = true;
          } else {
            this.addQusetionnaireForm.isAuthWxIndex = false;
          }
          if (data.isPassword == 1) {
            this.addQusetionnaireForm.showPasswordIndex = true;
          } else {
            this.addQusetionnaireForm.showPasswordIndex = false;
          }
          if (data.isTimeControl == 1) {
            this.addQusetionnaireForm.showTimeIndex = true;
          } else {
            this.addQusetionnaireForm.showTimeIndex = false;
          }
          if (data.startTime != null) {
            this.daterange[0] = data.startTime;
            this.daterange[1] = data.endTime;
          }

          this.addQusetionnaireForm.labelPosition = data.labelPosition;
          if (data.labelPosition == "top") {
            this.addQusetionnaireForm.labelPositionIndex = true;
          } else {
            this.addQusetionnaireForm.labelPositionIndex = false;
          }

        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addQusetionnaireForm.id = "";
      this.addQusetionnaireForm.title = "";
      this.addQusetionnaireForm.content = "";
      this.addQusetionnaireForm.status = "";
      this.addQusetionnaireForm.type = "";
      this.addQusetionnaireForm.createName = "";
      this.addQusetionnaireForm.createTime = "";
      this.addQusetionnaireForm.startTime = "";
      this.addQusetionnaireForm.endTime = "";
      this.addQusetionnaireForm.count = "";
      this.addQusetionnaireForm.isTemplate = "";
      this.addQusetionnaireForm.effect = "";
      this.addQusetionnaireForm.version = "";
      this.addQusetionnaireForm.createId = "";
      this.addQusetionnaireForm.updateTime = "";
      this.addQusetionnaireForm.daterange = "";
      this.btnName = "立即创建"

    },
    changeIsAuthWxIndexIndex(e) {
      if (this.addQusetionnaireForm.isAuthWxIndex == true) {
        this.addQusetionnaireForm.isAuthWx = 1;
      } else {
        this.addQusetionnaireForm.isAuthWx = 0;
      }
    },
    save() {
      this.$refs.addQusetionnaireRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("title", this.addQusetionnaireForm.title);
          params.append("content", this.addQusetionnaireForm.content);
          params.append("isTemplate", this.isTemplate);
            params.append("finishMessage", this.addQusetionnaireForm.finishMessage);
            params.append("labelPosition", this.addQusetionnaireForm.labelPosition);
            params.append("isAuthWx", this.addQusetionnaireForm.isAuthWx == null ? '' : this.addQusetionnaireForm.isAuthWx);
            if (this.daterange != "") {
              params.append("startTimeStr", this.daterange[0]);
              params.append("endTimeStr", this.daterange[1]);
            }
            params.append("password", this.addQusetionnaireForm.password == null ? '' : this.addQusetionnaireForm.password);
            params.append("showIndex", this.addQusetionnaireForm.showIndex == true ? "1" : "0");
            params.append("isPassword", this.addQusetionnaireForm.isPassword);
            params.append("isTimeControl", this.addQusetionnaireForm.isTimeControl);
          if (this.addQusetionnaireForm.id) {
            params.append("status", this.addQusetionnaireForm.status);
            params.append("id", this.addQusetionnaireForm.id);
            httpService("/javaApi/qtQuestionnaire/edit", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("修改成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getQusetionnaireList();
                  this.dialogFormVisible = false;
                } else {
                  ElMessage.error("修改失败");
                }
              }
            );
          } else {
            params.append("status", 0);
            httpService("/javaApi/qtQuestionnaire/add", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("添加成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getQusetionnaireList();
                  //接口返回的uuid
                  let uuid = data.message;
                  this.$parent.goDesign(uuid);
                  this.dialogFormVisible = false;
                } else {
                  ElMessage.error("添加失败");
                }
              }
            );
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>

</style>